.input-placeholder-color(@color){
    input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color:@color;
       
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color:@color;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
       color:@color;
    }
    input:-ms-input-placeholder { /* Internet Explorer 10-11 */
       color:@color;
    }
    input::-ms-input-placeholder { /* Microsoft Edge */
       color:@color;
    }
}
.textarea-placeholder-color(@color){
   textarea::-webkit-input-placeholder { /* WebKit, Blink, Edge */
       color:@color;
   }
   :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color:@color;
      
   }
   ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:@color;
   }
   textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color:@color;
   }
   textarea::-ms-input-placeholder { /* Microsoft Edge */
      color:@color;
   }
}
/*********上下边框线**************/
.Xborder-1px-after(@color){
	position:relative;
	&:after{
		content: '';
		position: absolute;
      top: 0;
      right:0;
		bottom: 0;
		width: 1px;
		background-color: @color;
      -webkit-transform: scaleX(.5);
      transform: scaleX(.5);
   }
}
	
.Xborder-1px-before(@color){
	position:relative;
	&:before{
		content: '';
      position: absolute;
      left:0;
		top: 0;
		bottom: 0;
		width: 1px;
		background-color: @color;
      -webkit-transform: scaleX(.5);
      transform: scaleX(.5);
   }
}
.Yborder-1px-after(@color){
	position:relative;
	&:after{
		content: '';
		position: absolute;
		right: 0;
		left: 0;
      height: 1px;
      bottom: 0;
		background-color: @color;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
   }
}
	
.Yborder-1px-before(@color){
	position:relative;
	&:before{
		content: '';
      position: absolute;
      top: 0;
		right: 0;
		left: 0;
		height: 1px;
		background-color: @color;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
   }
}
/*******圆形***********/
.top-center(@top,@height) when (@top = 50%) {   
   margin-top:-@height/2;
}
.left-center(@left,@width) when (@left = 50%) {   
   margin-left:-@width/2;
}
.ball-before(@top,@left,@width,@height,@bg,@border,@active){
   position: relative;
   &:before{
      content:"";
      position:absolute;
      top:@top;
      left:@left;
      width:@width;
      height:@height;
      .top-center(@top,@height);
      .left-center(@left,@width);
      border-radius: 100%;
      border:1px solid @border;
      background-color:@bg;
     
   }
   &.active{
      &:before{
         background-color:@active;
      }
   }
}
.ball-after(@top,@right,@width,@height,@bg,@border,@active){
   position: relative;
   &:after{
      content:"";
      position:absolute;
      top:@top;
      right:@right;
      width:@width;
      height:@height;
      .top-center(@top,@height);
      .left-center(@right,@width);
      border-radius: 100%;
      border:1px solid @border;
      background-color:@bg;
     
   }
   &.active{
      &:before{
         background-color:@active;
      }
   }
}
/********三角形********/
.triangle-before(@wd,@color,@top,@left,@right,@bottom){
   position:relative;
   &:before{
      content:"";
      position:absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: @wd;
      border-color: @color;
      top:@top;
      left:@left;
      right:@right;
      bottom:@bottom;
     
   }
}

/******计算列数********/
.zz-col(@num,@margin){
   width:(100%-((@num - 1)*@margin))/@num;
}

.zz-col-item(@num,@margin,@padding,@height){
   float:left;
   .zz-col(@num,@margin);
   height:@height;
   line-height:@height;
   margin-right:@margin;
   padding:@padding;
   
}

/******缩放********/
.scale(@num){
   transform:scale(@num);
   -ms-transform:scale(@num); 	/* IE 9 */
   -moz-transform:scale(@num); 	/* Firefox */
   -webkit-transform:scale(@num); /* Safari 和 Chrome */
   -o-transform:scale(@num);
}

.bg-image(@img,@path) when (@path='/'){ //同级路径
   background-image: url('./@{img}');
}
.bg-image(@img,@path) when (@path='./'){ //assets 公用路径
   background-image: url('~_assets/img/@{img}');
}
.bg-image(@img){//同级路径
   background-image: url('~_assets/img/@{img}');
}





